<template>
  <div>
    <div class="box">猜你喜欢</div>
    <div class="sel">
         <span><select name="" id="select" ><option value="综合排序" v-for="(item , index) in option" :key="index">{{item}}</option></select></span>
        <span @click="mysort(index)" v-for="(item , index) in btnArr" :key="index">{{item}}</span>
       
        <!-- <span @click="fasterClick(index)"  :class="{active: currentIndex == index }" class="btn" v-for="(item,index) in list" :key="index">距离最近</span>
        <span>销量最高</span>
        <span>筛选</span> -->
    </div>
    <div class="spa">
        <span>年货节热卖</span>
        <span>津贴联盟</span>
        <span>满减优惠</span>
        <span>品质联盟</span>
    </div>
     <div class="list">
    <div class="shop" v-for="(item,index) in list" :key="index">
        <div class="imgbox">
            <img :src="item.pic" alt="">
        </div>
        <div class="text">
            <div class="name">{{item.name}}</div>
            <div class="saled">月售 {{item.saled}} 件</div>
            <div class="faster">距离&nbsp;{{item.faster}}&nbsp;km</div>
        </div>
    </div>
  </div>
  </div>
</template>

<script>
var pic = 'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fc-ssl.duitang.com%2Fuploads%2Fblog%2F202102%2F26%2F20210226073347_50f94.thumb.1000_0.jpeg&refer=http%3A%2F%2Fc-ssl.duitang.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1668240950&t=a5e75c663474fbf7b874b9e7a9324adf';
export default {
    data(){
        return {
            option:['综合排序','hhh'],
            btnArr:['距离最近','销量最高','筛选'],
            list:[
                {pic,name:'烤鸭店',saled:888,faster:34},
                {pic,name:'饺子馆',saled:9999,faster:40},
                {pic,name:'烤馍店',saled:7777,faster:20},
            ]
        }
    },
    methods:{
        mysort(index){
            if(index==0){
                this.list.sort((a,b)=>{
                    return a.faster - b.faster;
                })
            }
            else if( index == 1 ){ 
                this.list.sort((a,b)=>{
                    return b.saled - a.saled;
                })
            }
        }
    }
}
</script>

<style lang='scss' scoped>
.box{
    font-size: 20px;
    font-weight: bold;
    margin:10px  20px;
}
.sel #select{
    border: none;
}
.sel span{
    display: inline-block;
    margin: 3px 15px;
    font-size: 14px;
    
}
.spa span{
    display: inline-block;
    margin: 10px 15px;
     font-size: 14px;
    background-color: #E3E4E5;
}
.list .shop{
    margin: 10px;
    display: flex;
}
.list .shop .imgbox{
    width: 80px;
    margin-right: 10px;
}
.list .shop .imgbox img{
    width: 100%;
}
.list .shop .text{
    flex: 1;
    font-size: 14px;
}
.list .shop .text .name{
    font-weight: bold;
}
</style>